<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .block {
            position: absolute;
            left: 0;
            top: 0;
        }

        .sliderContainer {
            position: relative;
            text-align: center;
            width: 310px;
            height: 40px;
            line-height: 40px;
            margin-top: 15px;
            background: #f7f9fa;
            color: #45494c;
            border: 1px solid #e4e7eb;
        }

        .sliderContainer_active .slider {
            height: 38px;
            top: -1px;
            border: 1px solid #1991FA;
        }

        .sliderContainer_active .sliderMask {
            height: 38px;
            border-width: 1px;
        }

        .sliderContainer_success .slider {
            height: 38px;
            top: -1px;
            border: 1px solid #52CCBA;
            background-color: #52CCBA !important;
        }

        .sliderContainer_success .sliderMask {
            height: 38px;
            border: 1px solid #52CCBA;
            background-color: #D2F4EF;
        }

        .sliderContainer_success .sliderIcon {
            background-position: 0 0 !important;
        }

        .sliderContainer_fail .slider {
            height: 38px;
            top: -1px;
            border: 1px solid #f57a7a;
            background-color: #f57a7a !important;
        }

        .sliderContainer_fail .sliderMask {
            height: 38px;
            border: 1px solid #f57a7a;
            background-color: #fce1e1;
        }

        .sliderContainer_fail .sliderIcon {
            top: 14px;
            background-position: 0 -82px !important;
        }

        .sliderContainer_active .sliderText,
        .sliderContainer_success .sliderText,
        .sliderContainer_fail .sliderText {
            display: none;
        }

        .sliderMask {
            position: absolute;
            left: 0;
            top: 0;
            height: 40px;
            border: 0 solid #1991FA;
            background: #D1E9FE;
        }

        .slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            background: #fff;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: background .2s linear;
        }

        .slider:hover {
            background: #1991FA;
        }

        .slider:hover .sliderIcon {
            background-position: 0 -13px;
        }

        .sliderIcon {
            position: absolute;
            top: 15px;
            left: 13px;
            width: 14px;
            height: 12px;
            background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -26px;
            background-size: 34px 471px;
        }

        .refreshIcon {
            position: absolute;
            right: 0;
            top: 0;
            width: 34px;
            height: 34px;
            cursor: pointer;
            background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -437px;
            background-size: 34px 471px;
        }
    </style>
</head>

<body>
    <canvas width="310" height="155" id="canvas"></canvas>
    <canvas width="310" height="155" id="block"></canvas>
    <script>
        var canvas = document.getElementById('canvas')
        var block = document.getElementById('block')
        var canvas_ctx = canvas.getContext('2d')
        var block_ctx = block.getContext('2d')
        var img = document.createElement('img')
        img.onload = function() {
            canvas_ctx.drawImage(img, 0, 0, 310, 155);
            block_ctx.drawImage(img, 0, 0, 310, 155);
            // let url = block.toDataURL("image/png");
            // console.log('url_>', url);
            // 灰阶过滤
            // let imageData = block_ctx.getImageData(0, 0, 310, 155);
            // let data = imageData.data;
            // let len = data.length;
            // for (var i = 0; i < len; i += 4) {
            //     red = data[i];
            //     green = data[i + 1];
            //     blue = data[i + 2];
            //     alpha = data[i + 3];
            //     //求得rgb 平均值
            //     average = Math.floor((red + green + blue) / 3);
            //     //设置颜色值，透明度不变
            //     data[i] = average;
            //     data[i + 1] = average;
            //     data[i + 2] = average;
            // }
            // //回写图像数据并显示结果
            // imageData.data = data;
            // block_ctx.putImageData(imageData, 0, 0);
        };
        img.src = 'img.jpg';

        function logError(sev, msg) {
            var img = new Image();
            img.src = "log.php?sev=" + encodeURIComponent(sev) + "&msg=" +
                encodeURIComponent(msg);
        }
    </script>
</body>

</html>